// 改变表单值有两种方式: 1. 用户改变 2.代码改变
// 受控: 代码可以改变表单的值
// 非受控: 不能通过代码改变表单的值, 但是可以给表单设置初始值defaultValue
// 方法: 代码设置表单初始value, 但是能改变value的只有用户, 代码只能通过监听onChange来拿到最新的值, 或者通过ref拿到dom之后读取value
// 一旦给input设置了value, 用户就不能修改它了,可以输入触发onChange事件, 但是表单的值不会变
// 用户输入之后在onChange事件里拿到输入, 然后通过代码去设置value, 这是受控模式

import { Button, Space } from "antd";
import { ChangeEvent, useEffect, useRef, useState } from "react";

// value 由用户控制就是非受控模式，由代码控制就是受控模式。

// 通过onChange事件拿到用户输入的值，非受控
// export function Calendar() {

//     function onChange(event: ChangeEvent<HTMLInputElement>) {
//         console.log(event.target.value);
//     }

//     return (
//         <div>
//             <input defaultValue={'帅'} onChange={onChange} />
//         </div>
//     );
// }

// 通过ref拿到最新的值
// export function Calendar() {

//     const inputRef = useRef<HTMLInputElement>(null)

//     useEffect(() => {
//         setTimeout(() => {
//             console.log(inputRef.current?.value);
//         }, 2000);
//     }, [])

//     return (
//         <div>
//             <input defaultValue={'帅'} ref={inputRef} />
//         </div>
//     );
// }



// 受控模式  会导致组件重新渲染
// export function Calendar() {

//     console.log('render .....');


//     const [value, setValue] = useState('帅')

//     function handleChange(event: ChangeEvent<HTMLInputElement>) {
//         console.log(event.target.value);

//         setValue(event.target.value)
//     }

//     return (
//         <div>
//             <input value={value} onChange={handleChange} />
//         </div>
//     );
// }


// 非受控版本

// interface CalendarProps {
//     defaultValue: Date
//     onChange: (value: Date) => void
// }


// export function Calendar(props: CalendarProps) {


//     const {
//         defaultValue = new Date(),
//         onChange
//     } = props

//     const [value, setValue] = useState(defaultValue)


//     function changeValue(date: Date) {
//         setValue(date)
//         onChange?.(date)
//     }

//     return (
//         <div>
//             {value.toLocaleDateString()}
//             <Space>
//                 <Button onClick={() => { changeValue(new Date('2025-3-11')) }}>2025-3-11 </Button>
//                 <Button onClick={() => { changeValue(new Date('2025-3-12')) }}>2025-3-12 </Button>
//                 <Button onClick={() => { changeValue(new Date('2025-3-13')) }}>2025-3-13 </Button>
//             </Space>
//         </div>
//     );
// }


// export function CalendarDemo() {
//     return (
//         <div>
//             <Calendar defaultValue={new Date('2025-11-2')} onChange={(date) => {
//                 console.log(date.toLocaleDateString);

//             }} />
//         </div>
//     );
// }


// 受控版本
// interface CalendarProps {
//     value: Date
//     onChange: (value: Date) => void
// }


// export function Calendar(props: CalendarProps) {


//     const {
//         value,
//         onChange
//     } = props



//     function changeValue(date: Date) {
//         onChange?.(date)
//     }

//     return (
//         <div>
//             {value.toLocaleDateString()}
//             <Space>
//                 <Button onClick={() => { changeValue(new Date('2025-3-11')) }}>2025-3-11 </Button>
//                 <Button onClick={() => { changeValue(new Date('2025-3-12')) }}>2025-3-12 </Button>
//                 <Button onClick={() => { changeValue(new Date('2025-3-13')) }}>2025-3-13 </Button>
//             </Space>
//         </div>
//     );
// }


// export function CalendarDemo() {

//     const [value, setValue] = useState(new Date('2025-11-2'))

//     return (
//         <div>
//             <Calendar value={value} onChange={(date) => {
//                 console.log(date.toLocaleDateString);
//                 setValue(date)

//             }} />
//         </div>
//     );
// }



// 受控模式 + 非受控模式
interface CalendarProps {
    value?: Date
    defaultValue?: Date
    onChange?: (value: Date) => void
}


export function Calendar(props: CalendarProps) {


    const {
        value: propsValue,
        defaultValue,
        onChange
    } = props


    const [value, setValue] = useState(() => {
        if (propsValue) {
            return propsValue
        } else {
            return defaultValue
        }
    })

    const isFirstRender = useRef(true)


    useEffect(() => {
        if (propsValue === undefined && !isFirstRender.current) {
            setValue(propsValue)
        }
        isFirstRender.current = false
    }, [propsValue])


    const mergedValue = propsValue ? propsValue : value




    function changeValue(date: Date) {
        if (propsValue === undefined) {
            setValue(date)
        }
        onChange?.(date)
    }

    return (
        <div>
            {mergedValue?.toLocaleDateString()}
            <h1>ddd</h1>
            <Space>
                <Button onClick={() => { changeValue(new Date('2025-3-11')) }}>2025-3-11 </Button>
                <Button onClick={() => { changeValue(new Date('2025-3-12')) }}>2025-3-12 </Button>
                <Button onClick={() => { changeValue(new Date('2025-3-13')) }}>2025-3-13 </Button>
            </Space>
        </div>
    );
}


export function CalendarDemo() {

    // const [value, setValue] = useState(new Date('2025-11-2'))

    // return (
    //     <div>
    //         <Calendar value={value} onChange={(date) => {
    //             console.log(date.toLocaleDateString);
    //             setValue(date)

    //         }} />
    //     </div>
    // );

    return <Calendar defaultValue={new Date('2024-5-1')} onChange={(date) => {
        console.log(date.toLocaleDateString());
    }} />
}